<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
  </head>
  <body>
    <button id="btn1">点击发送 GET 请求</button>
    <button id="btn2">点击发送 GET 请求(async 和 await)</button>
    <button id="btn3">点击发送 POST 请求</button>
    <button id="btn4">点击发送 PUT 请求</button>
    <button id="btn5">点击发送 DELETE 请求</button>

    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script>
     // 绑定点击监听
     document.getElementById('btn1').onclick = function () {
       // 使用axios发请求
       /* axios({
          url: 'http://localhost:3000/movie',  //不带参数
          method: 'GET', 
        }).then(response=>{
          console.log(response)
          // alert(response.data)
          alert(JSON.stringify(response.data))
        },error=>{
          console.log(error)
          alert(error.message)
        }) */

        /* axios({
          // url:'http://localhost:3000/movie/1', //带param参数
          // url:'http://localhost:3000/movie?id=1', //带query参数
          // url:'http://localhost:3000/movie',
          // params:{//带query参数
          //   id:1
          // }
        }) */
        /* axios('http://localhost:3000/movie/1')//发get请求的简洁写法, 一般不带query参数时使用
        .then(response=>{
          console.log(response)
          alert(JSON.stringify(response.data))
        },error=>{
          console.log(error)
          alert(error.message)
        })
     } */

    }
    document.getElementById('btn2').onclick=async ()=>{
      try{
        let response=await axios('http://localhost:3000/movie')
         console.log(response)
         alert(JSON.stringify(response.data))
      }
      catch(error){
         console.log(error)
         alert(error.message)
      }
    }
    document.getElementById('btn3').onclick=async ()=>{
      try{
        let response=await axios({
         url: 'http://localhost:3000/movie',
         method:'post',
         data:{
           name:'好电影',
           director:'好导演'
         },
         data:'name=12&director=0',

        })
         console.log(response)
         alert(JSON.stringify(response.data))
      }
      catch(error){
         console.log(error)
         alert(error.message)
      }
    }
    document.getElementById('btn4').onclick=async ()=>{
      try{
        let response=await axios({
          url:'http://localhost:3000/movie/7',
          method:'put',
          data:{
            name:'好2',
            director:'好导演22'
          }
        })
         console.log(response)
         alert(JSON.stringify(response.data))
      }
      catch(error){
         console.log(error)
         alert(error.message)
      }
    }
    document.getElementById('btn4').onclick=async ()=>{
      try{
        let response=await axios({
          url:'http://localhost:3000/movie/8',
          method:'delete'
        })
         console.log(response)
         alert(JSON.stringify(response.data))
      }
      catch(error){
         console.log(error)
         alert(error.message)
      }
    }
    </script>
  </body>
</html>
